<template>
	<div>
		<div class="header">
			<h3>商家登录<router-link to="/Home">返回首页</router-link><span class="shu">|</span><router-link to="/Entry">帮助中心</router-link></h3>

		</div>
		<div class="content">
			<div class="login">
				<h3>账号登录</h3>
				<p class="username"><input type="text" v-model="names" placeholder="用户名/邮箱/手机号" @blur="judgename()" ref="names"></input></p>
				<p class="name"></p>
				<p class="passwords"><input type="password" placeholder="密码" ref="passwords" v-model="passwords"  @blur="judgepassword()"/></p>
				<p class="remember"><label><input type="checkbox" v-model="remember" @click="alocked()" style="vertical-align:middle;"/>记住用户</label> </p>
				<p class="entry"><button class="submit" @click="SignIn()">登录</button></p>
				<p class="other"><router-link to="/Login">立即注册</router-link><router-link to="/Entry">忘记密码</router-link></p>
			</div>

		</div>
		<ul class="list">
			<li>100%正品</li>
			<li>双重质检</li>
			<li>全球化采购</li>
			<li>无理由退货</li>
			<li>贵就赔</li>
			<li>万千口碑</li>
		</ul>
		<Footers></Footers>
	</div>
</template>

<script>
import Footers from'@/components/Footers'

	export default{
		data(){
			return{
				names: '',
				passwords:'',
				remember:'',
				nameO:'flase'

			}
		},
		 created: function () {
               var usename = localStorage.getItem("usename");
               var usepasswords = localStorage.getItem("usepasswords");
               var remembers = localStorage.getItem("remembers");
               if(remembers){
               		this.names=usename
              		this.passwords=usepasswords
               		this.remember=remembers
               }



          },
          components:{
		      Footers,

		    },
		methods: {

		  judgename:function(){
		  		 var Expression = /^[0-9a-zA-Z_]{6,18}$/ ;
				 var objExp=new RegExp(Expression);
				 if(objExp.test(this.$refs.names.value)==true){
					$(".name").text("")

		        	this.nameO="true"
		        }else{
		        	$(".name").text("用户名格式不正确")
		        	$(".name").css("color","red")
		        	this.nameO="flase"
		        }
		        this.alocked()
		  },
		  judgepassword:function(){
		  	this.alocked()
		  },
		  SignIn:function(){

		  	   this.$http({
		                    method:'GET',
		                    url:'http://www.wutongsd.com/awm/expertsDetails.do?id=44',


		                    emulateJSON: true

			            }).then(function(data){

//			               console.log(this.$refs.names.value,this.$refs.passwords.value)

			            },function(error){

			              	alert("333")

			            })
		  },
		  alocked:function(){
//		       console.log(this.remember)
		       if(this.remember){
		       		localStorage.setItem("usename", this.$refs.names.value);
		       		localStorage.setItem("usepasswords", this.$refs.passwords.value);
		       		localStorage.setItem("remembers", this.remember);

		       }else{
		       		localStorage.removeItem("usename")
		       		localStorage.removeItem("usepasswords")
		       		localStorage.removeItem("remembers");
		       }
		  }



		}
	}
</script>

<style scoped>

.header{
	width:1060px;
	height:120px;
	margin:0 auto;
	background:url(../assets/logo.png) no-repeat 8px;
}
.header h3{
	height:120px;
	line-height:120px;
	font-size:21px;
	text-align: left;
	margin-left:220px;
}
.header h3 a:nth-child(1){
	display:inline-block;
	font-size:14px;
	text-indent:570px;
	width:640px;
	font-weight:100;
	color:#333;

}
.header h3 span{
	font-size:16px;
	font-weight:100;
	color:#b5b5b5;
}
.header h3 a:nth-child(3){
	display:inline-block;
	font-size:14px;
	text-indent:14px;
	width:70px;
	font-weight:100;
	color:#333;

}
.content{
	height:460px;
	text-align: left;
	width:100%;
	background:url(../assets/bg5.png) no-repeat;
	position: relative;

}
.content .login{
	height:265px;

	width:282px;

	position: absolute;
	left:833px;
	top:30px;


}
.login h3{
	height:48px;
	font-size:20px;

}
.username{
	height:36px;
	width:282px;
}
.username input{
	height:34px;
	width:280px;
	border:1px solid #aaa;
	text-indent:5px;
	background:#fff;
}
.name{
	height:40px;
	width:100%;
}
.passwords{
	height:36px;
	width:282px;
}
.passwords input{
	height:34px;
	width:280px;
	border:1px solid #aaa;
	text-indent:5px;
	background:#fff;
}
.remember{
	height:30px;
	margin-top:10px;
	font-size:11px;
}

.remember input{
	background:#fff;
	margin-right:14px;

}
.entry{
	height:35px;
	margin-bottom:20px;
}
.entry button{
	height:35px;
	width:100%;
	color:#fff;
	background:#66afff;
	border:none;
}
.other{
	height:10px;
	width:100%;

}
.other a:nth-child(1){
	height:10px;
	display:inline-block;
	width:50px;
	font-size:10px;
	color:#7c7d7d;

}
.other a:nth-child(2){
	height:10px;
	width:50px;
	font-size:10px;
	color:#7c7d7d;
	display:inline-block;
	margin-left:180px;

}
.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}

</style>
